<template>
  <div style="min-height: 600px;">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="dataForm" :rules="dataRule" size="small" label-width="100px" label-position="left"
        :disabled="setting.readonly">
        <!-- v-if="!loading && formOperates" -->
        <template>
          <!-- <el-col :span="24" v-if="judgeShow('code')">
            <el-form-item label="接待编码" prop="code">
              <el-input :disabled="judgeWrite('code')" v-model="dataForm.code" placeholder="请输入" clearable
                :style='{"width":"100%"}'>

              </el-input>
            </el-form-item>
          </el-col> -->

          <el-col :span="24" v-if="judgeShow('content')">
            <el-form-item label="接待内容" prop="content">
              <el-input :disabled="judgeWrite('content')" v-model="dataForm.content" placeholder="请输入" clearable
                :style='{"width":"100%"}'>

              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('headphone')">
            <el-form-item label="负责人联系电话" prop="headphone">
              <el-input :disabled="judgeWrite('headphone')" v-model="dataForm.headphone" placeholder="请输入" clearable
                :style='{"width":"100%"}'>

              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('tasktype')">
            <el-form-item label="任务类型" prop="tasktype">
              <el-select :disabled="judgeWrite('tasktype')" v-model="dataForm.tasktype" placeholder="请选择" clearable
                :style='{"width":"100%"}'>
                <el-option v-for="(item, index) in tasktypeOptions" :key="index" :label="item.fullName" :value="item.id"
                  :disabled="item.disabled"></el-option>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('taskstarttime')">
            <el-form-item label="任务开始时间" prop="taskstarttime">
              <el-date-picker :disabled="judgeWrite('taskstarttime')" v-model="dataForm.taskstarttime" placeholder="请选择"
                clearable :style='{"width":"100%"}' type="datetime" format="yyyy-MM-dd HH:mm" value-format="timestamp">

              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('taskendtime')">
            <el-form-item label="任务结束时间" prop="taskendtime">
              <el-date-picker :disabled="judgeWrite('taskendtime')" v-model="dataForm.taskendtime" placeholder="请选择"
                clearable :style='{"width":"100%"}' type="datetime" format="yyyy-MM-dd HH:mm" value-format="timestamp">

              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('withperonid')">
            <el-form-item label="陪同人员" prop="withperonid">
              <user-select :disabled="judgeWrite('withperonid')" v-model="dataForm.withperonid" placeholder="请选择"
                clearable>

              </user-select>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('headpersonid')">
            <el-form-item label="负责人" prop="headpersonid">
              <user-select :disabled="judgeWrite('headpersonid')" v-model="dataForm.headpersonid" placeholder="请选择"
                clearable>

              </user-select>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('isphoto')">
            <el-form-item label="是否照相" prop="isphoto">
              <el-switch :disabled="judgeWrite('isphoto')" v-model="dataForm.isphoto" :active-value="1"
                :inactive-value="0">

              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="judgeShow('isrecord')">
            <el-form-item label="是否录像" prop="isrecord">
              <el-switch :disabled="judgeWrite('isrecord')" v-model="dataForm.isrecord" :active-value="1"
                :inactive-value="0">

              </el-switch>
            </el-form-item>
          </el-col>

        </template>
        <div class="JNPF-common-page-header">
          <div class="options">
            <el-button @click="goBack">关闭</el-button>
            <el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button>
          </div>
        </div>
      </el-form>
    </el-row>
    <UserBox v-if="userBoxVisible" ref="userBox" @submit="submit" />

  </div>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'


  export default {
    components: {

    },
    props: [],
    data() {
      return {

        visible: false,
        loading: false,
        setting: {},
        eventType: '',
        userBoxVisible: false,
        dataForm: {
          companyid: '',
          id: '',
          flowId: '',
          status: 1,
          freeapproveruserid: '',
          code: '',
          content: '',
          headphone: '',
          tasktype: "",
          taskstarttime: '',
          taskendtime: '',
          withperonid: '',
          headpersonid: '',
          isphoto: 0,
          isrecord: 0,
        },
        tableRequiredData: {},
        dataRule: {},
        tasktypeOptions: [{
          "fullName": "选项一",
          "id": "1"
        }, {
          "fullName": "选项二",
          "id": "2"
        }],

      }
    },
    computed: {
      formOperates() {
        return this.setting.formOperates
      }
    },
    watch: {},
    created() {
      this.getTask();
    },
    mounted() {},
    methods: {
      // 获取任务类型
      getTask() {
        request({
          url: '/api/system/DictionaryData/424298617168207813',
          method: 'get',
        }).then((res) => {
          this.tasktypeOptions = res.data.list;
        })
      },
      judgeShow(id) {
        if (!this.setting.formOperates || !this.setting.formOperates.length) return true
        let arr = this.setting.formOperates.filter(o => o.id === id) || []
        if (!arr.length) return true
        let item = arr[0]
        return item.read
      },
      judgeWrite(id) {
        if (!this.setting.formOperates || !this.setting.formOperates.length) return false
        let arr = this.setting.formOperates.filter(o => o.id === id) || []
        if (!arr.length) return true
        let item = arr[0]
        return !item.write
      },
      goBack() {
        this.$emit('refresh')
      },
      init(data, id) {
        this.dataForm.companyid = data.id;
        this.dataForm.id = id;
        // this.setting = data;
        // this.visible = true;
        // // this.updateDataRule()
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (id) {
            console.log(id)
            this.loading = true
            request({
              url: '/api/example/BusReceiverPlanMain/' + id,
              method: 'get'
            }).then(res => {
              this.dataInfo(res.data)
              this.loading = false
            })
          }
          // this.$emit('setPageLoad')
        })
        this.$store.commit('generator/UPDATE_RELATION_DATA', {})
      },
      // updateDataRule() {
      //   let newRules = {}
      //   for (let i = 0; i < this.setting.formOperates.length; i++) {
      //     const item = this.setting.formOperates[i]
      //     if (!item.id.includes('-')) {
      //       const newRulesItem = {
      //         required: item.required,
      //         message: item.name + '不能为空',
      //         trigger: item.trigger || 'blur'
      //       }
      //       if (!this.dataRule.hasOwnProperty(item.id)) {
      //         if (item.required) this.$set(newRules, item.id, [newRulesItem])
      //       } else {
      //         let withoutRequiredItem = true
      //         for (let i = 0; i < this.dataRule[item.id].length; i++) {
      //           if (this.dataRule[item.id][i].hasOwnProperty('required')) {
      //             this.dataRule[item.id][i].required = item.required
      //             withoutRequiredItem = false
      //           }
      //         }
      //         if (withoutRequiredItem && item.required) this.dataRule[item.id].push(newRulesItem)
      //       }
      //     } else {
      //       let key = item.id.split('-')[0]
      //       let newId = item.id.split('-')[1]
      //       let newItem = {
      //         ...item,
      //         id: newId
      //       }
      //       if (!this.tableRequiredData.hasOwnProperty(key)) {
      //         this.$set(this.tableRequiredData, key, [newItem])
      //       } else {
      //         this.tableRequiredData[key].push(newItem)
      //       }
      //     }
      //   }
      //   this.dataRule = {
      //     ...this.dataRule,
      //     ...newRules
      //   }
      // },
      // exist() {
      //   let isOk = true
      //   for (let key in this.tableRequiredData) {
      //     if (this.dataForm[key] && Array.isArray(this.dataForm[key])) {
      //       for (let i = 0; i < this.dataForm[key].length; i++) {
      //         let item = this.dataForm[key][i]
      //         inner: for (let id in item) {
      //           let arr = this.tableRequiredData[key].filter(o => o.id === id) || []
      //           if (!arr.length) continue inner
      //           if (arr[0].required) {
      //             let msg = `${arr[0].name}不能为空`
      //             let boo = true
      //             if (arr[0].dataType === 'array') {
      //               boo = !this.jnpf.isEmptyArray(item[id])
      //             } else {
      //               boo = !this.jnpf.isEmpty(item[id])
      //             }
      //             if (!boo) {
      //               this.$message({
      //                 message: msg,
      //                 type: 'error',
      //                 duration: 1000
      //               })
      //               isOk = false
      //               break
      //             }
      //           }
      //         }
      //       }
      //     }
      //   }
      //   return isOk
      // },
      // judgeRequired(id) {
      //   if (!this.formOperates || !this.formOperates.length) return false
      //   let arr = this.formOperates.filter(o => o.id === id) || []
      //   if (!arr.length) return false
      //   let item = arr[0]
      //   return item.required
      // },
      // // 表单提交
      dataFormSubmit(eventType) {
        console.log(this.dataForm)
        if (this.dataForm.id) {
          // 编辑
          this.$refs['elForm'].validate((valid) => {
            if (valid) {
              request({
                url: '/api/example/BusReceiverPlanMain/' + this.dataForm.id,
                method: 'put',
                data: this.dataForm
              }).then((res) => {
                this.$emit('refresh', true)
              })
            }
          })
        } else {
          this.$refs['elForm'].validate((valid) => {
            if (valid) {
              request({
                url: '/api/example/BusReceiverPlanMain/addPlan',
                method: 'post',
                data: this.dataForm
              }).then((res) => {
                this.$emit('refresh', true)
              })
            }
          })
        }

      },
      // request() {
      //   var _data = this.dataList()
      //   if (!this.dataForm.id) {
      //     request({
      //       url: '/api/example/BusReceiverPlanMain',
      //       method: 'post',
      //       data: _data
      //     }).then((res) => {
      //       this.$message({
      //         message: res.msg,
      //         type: 'success',
      //         duration: 1000,
      //         onClose: () => {
      //           this.visible = false
      //           this.$emit('close', true)
      //         }
      //       })
      //     })
      //   } else {
      //     request({
      //       url: '/api/example/BusReceiverPlanMain/' + this.dataForm.id,
      //       method: 'PUT',
      //       data: _data
      //     }).then((res) => {
      //       this.$message({
      //         message: res.msg,
      //         type: 'success',
      //         duration: 1000,
      //         onClose: () => {
      //           this.visible = false
      //           this.$emit('close', true)
      //         }
      //       })
      //     })
      //   }
      // },
      // dataList() {
      //   var _data = JSON.parse(JSON.stringify(this.dataForm));
      //   _data.isphoto = parseInt(_data.isphoto)
      //   _data.isrecord = parseInt(_data.isrecord)
      //   return _data;
      // },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        _dataAll.isphoto = parseInt(_dataAll.isphoto)
        _dataAll.isrecord = parseInt(_dataAll.isrecord)
        this.dataForm = _dataAll
      },
    },
  }

</script>
